/**
 * 厦门大学计算机专业 | 前华为工程师
 * 专注《零基础学编程系列》  http://lblbc.cn/blog
 * 包含：Java | 安卓 | 前端 | Flutter | iOS | 小程序 | 鸿蒙
 * 公众号：蓝不蓝编程
 */
<template>
  <div class="page-wrapper">
    <s-header :name="'设置'" :back="'/mine'"></s-header>
    <div class="user-info-container">
      <div class="user-info-row">
        <img class="user-img" src="../images/user.png" />
        <div class="user-info">
          <div>尊贵会员</div>
          <div class="user-level">级别：白银</div>
        </div>
        <div>
          <img class="right_arrow" src="../images/right_arrow.png" />
        </div>
      </div>
      <div class="split"></div>
      <div class="common-info-row">
        <div class="common-info">隐私设置</div>
        <img class="right_arrow" src="../images/right_arrow.png" />
      </div>
      <div class="split"></div>
      <div class="common-info-row">
        <div class="common-info">隐私政策</div>
        <img class="right_arrow" src="../images/right_arrow.png" />
      </div>
      <div class="split"></div>
      <div class="common-info-row" @click="gotoAbout">
        <div class="common-info">关于</div>
        <img class="right_arrow" src="../images/right_arrow.png" />
      </div>
    </div>
    <van-button @click="doLogout" class="logout-btn" color="#ED9220" type="primary" block>退出登录</van-button>
  </div>
</template>

<script>
import sHeader from '@/components/MyHeader'
import { useRouter } from 'vue-router'
import { setStorage } from '@/common/js/utils'

export default {
  components: {
    sHeader
  },
  setup() {
    const router = useRouter()

    const gotoAbout = () => {
      router.push({ path: '/about' })
    }

    const doLogout = async () => {
        setStorage('token', '')
        router.push({ path: '/home' })
    }

    return {
      gotoAbout,
      doLogout
    }
  }
}
</script>

<style>
.page-wrapper {
  background-color: #f4f4f4;
  font-size: 14px;
  padding-bottom: 20px;
}

.user-img {
  height: 60px;
  width: 60px;
}

.user-row {
  padding-left: 12px;
  display: flex;
  flex-direction: row;
}

.user-info {
  padding-left: 30px;
  flex: 1;
}

.user-level {
  margin-top: 6px;
  width: 100px;
  color: #9e9ea2;
}

.user-info-container {
  background-color: #fff;
  border-radius: 6px;
  margin-top: 24px;
  margin-left: 12px;
  margin-right: 12px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.user-info-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  margin-bottom: 12px;
}

.right_arrow {
  height: 24px;
  width: 24px;
}

.view_details {
  display: flex;
  flex-direction: row;
}
.split {
  background-color: #eaeaea;
  height: 1px;
  width: 100%;
}
.common-info-row {
  display: flex;
  flex-direction: row;
  margin-top: 12px;
}
.common-info {
  flex: 1;
}
.logout-btn {
  position: fixed;
  bottom: 10px;
  right: 0;
  left: 0;
  width: 90%;
  margin: 0 auto;
  border-radius: 20px;
}
</style>
